<template>
  <div :style="{ width: props.width, height: props.height }">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      :width="props.width"
      :height="props.height"
      viewBox="0 0 74.645 73.083"
      preserveAspectRatio="none meet"
    >
      <defs>
        <linearGradient
          id="linear-gradient"
          x1="0.138"
          y1="0.5"
          x2="0.841"
          y2="0.5"
          gradientUnits="objectBoundingBox"
        >
          <stop offset="0" :stop-color="states.color2" />
          <stop offset="1" :stop-color="states.color2" stop-opacity="0" />
        </linearGradient>
        <linearGradient
          id="linear-gradient-2"
          x1="0.862"
          x2="0.159"
          xlink:href="#linear-gradient"
        />
      </defs>
      <g id="装饰5" transform="translate(-754.842 -243.968)">
        <path
          id="矩形_57_-_轮廓"
          data-name="矩形 57 - 轮廓"
          d="M-1-1H16.655V16.655H-1ZM14.083,1.572H1.572V14.083H14.083Z"
          transform="translate(790.266 269.414) rotate(45)"
          :fill="states.color2"
        />
        <path
          id="路径_1190"
          data-name="路径 1190"
          d="M-19288.533-22317.5l16,1h0l-16,1Z"
          transform="translate(20088.313 22596.984)"
          fill="url(#linear-gradient)"
        />
        <path
          id="路径_1190-2"
          data-name="路径 1190"
          d="M-19272.533-22317.5l-16,1h0l16,1Z"
          transform="translate(20053.316 22596.984)"
          fill="url(#linear-gradient-2)"
        />
        <path
          id="路径_1190-3"
          data-name="路径 1190"
          d="M-19272.533-22317.5l-16,1h0l16,1Z"
          transform="translate(-21526.219 19543.018) rotate(90)"
          fill="url(#linear-gradient-2)"
        />
        <path
          id="路径_1190-4"
          data-name="路径 1190"
          d="M16,2,0,1H0L16,0Z"
          transform="translate(789.283 306.516) rotate(-90)"
          fill="url(#linear-gradient-2)"
        />
        <rect
          id="矩形_59"
          data-name="矩形 59"
          width="5.528"
          height="5.528"
          transform="translate(790.283 276.574) rotate(45)"
          :fill="states.color"
        />
        <path
          id="减去_16"
          data-name="减去 16"
          d="M19930.189,22662.039a26.63,26.63,0,0,1-26.654-26.654,26.8,26.8,0,0,1,.721-6.178h1.639a25.054,25.054,0,0,0,24.295,31.242c.432,0,.844-.008,1.26-.029v1.59C19931.047,22662.029,19930.623,22662.039,19930.189,22662.039Z"
          transform="translate(-12131.16 -26971.633) rotate(16)"
          :fill="states.color"
        />
        <path
          id="减去_15"
          data-name="减去 15"
          d="M19941.139,22667.414a33.243,33.243,0,0,1-19.674-6.383v-2.512a31.54,31.54,0,0,0,45.5-6.553h2.4a33.747,33.747,0,0,1-11.9,11.207,33.356,33.356,0,0,1-16.324,4.24Z"
          transform="translate(-14011.059 -26006.891) rotate(12)"
          :fill="states.color"
        />
        <path
          id="减去_14"
          data-name="减去 14"
          d="M19965.938,22650.863h0v0l-2.461,0a25.657,25.657,0,0,0,2.484-2.176,24.723,24.723,0,0,0-7.469-40.07l1.035-1.254a26.284,26.284,0,0,1,15.234,23.852,26.23,26.23,0,0,1-8.824,19.648Z"
          transform="translate(-29369.102 1013.789) rotate(-50)"
          :fill="states.color"
        />
        <path
          id="减去_13"
          data-name="减去 13"
          d="M19907.869,22637.615h-2.043a33.468,33.468,0,0,1,32.809-26.687,33.553,33.553,0,0,1,9.334,1.316v2.09a31.512,31.512,0,0,0-40.1,23.279Z"
          transform="translate(-19148.828 -22362.926)"
          :fill="states.color"
        />
        <path
          id="减去_17"
          data-name="减去 17"
          d="M19907.869,22637.615h-2.043a33.468,33.468,0,0,1,32.809-26.687,33.553,33.553,0,0,1,9.334,1.316v2.09a31.512,31.512,0,0,0-40.1,23.279Z"
          transform="matrix(-0.259, 0.966, -0.966, -0.259, 27821.975, -13117.625)"
          :fill="states.color"
        />
      </g>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  id: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;
let emit = defineEmits(["updateSize"]);
onMounted(() => {
  emit("updateSize", {
    w: 351,
    h: 300,
    id: props.id,
  });
});
</script>

<style scoped lang="scss"></style>
